<template>
  <div class="char1">
    <!-- 自定义一个div来装我们的图 -->
    <calendar :show="show" :dayClick="onChange" />
    <!-- <div class="top">
      <el-input
        placeholder="请选择日期"
        suffix-icon="el-icon-date"
        v-model="fromtime"
        @focus="show=true;seltime=true"
      ></el-input>
      <el-input
        placeholder="请选择日期"
        suffix-icon="el-icon-date"
        v-model="totime"
        @focus="show=true;seltime=false"
      ></el-input>
    </div> -->
    <div id="eschar2" style="height:200px"></div>
  </div>
</template>
<script>
import dayjs from "dayjs";
import { sale } from "@/api/echarts";
let echarts = require("echarts");
export default {
  name: "piechar",
  data() {
    return {
      fromtime: dayjs().format("YYYYMMDD"),
      totime: dayjs().format("YYYYMMDD"),
      seltime: true,
      show: false,
      sale: {},
      num: {},
      datanum: 0,
      series: [
        {
          //初始类型
          name: "数量",
          type: "axis",
          data: []
        }
      ],
      option: {
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(255,255,255,0.8)",
          extraCssText: "box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);",
          textStyle: {
            color: "#6a717b"
          }
        },
        grid: {
          top: "6%",
          left: "1%",
          right: "5%",
          bottom: "0.5%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: [],
            inverse: true,
            axisTick: {
              interval: 1, //横轴信息全部显示
              rotate: -30, //-15度角倾斜显示
              //坐标轴小标记
              show: true,
              alignWithLabel: true
            },
            axisLabel: {
              textStyle: {
                fontSize: 12,
                color: "#666"
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#2548ac"
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              interval: 1, //横轴信息全部显示
              rotate: -30, //-15度角倾斜显示
              textStyle: {
                fontSize: 12,
                color: "#666"
              }
            },
            axisLine: {
              lineStyle: {
                color: "#192469"
              }
            },
            splitLine: {
              lineStyle: {
                color: "#17367c"
              }
            }
          }
        ],
        series: [
          {
            name: "销售",
            type: "bar",
            barWidth: 10,
            data: [],
            label: {
              normal: {
                show: true,
                position: "insideRight",
                textStyle: {
                  color: "blue", //color of value
                  fontSize: 18
                }
              }
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  [
                    {
                      offset: 0,
                      color: "#0590eb" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#08e3f1" // 100% 处的颜色
                    }
                  ],
                  false
                ),
                barBorderRadius: [15, 15, 0, 0],
                shadowColor: "rgba(0,0,0,0.1)",
                shadowBlur: 3,
                shadowOffsetY: 3
              }
            }
          }
        ]
      }
    };
  },
  methods: {
    async draw() {
      //通过echarts初始化我们的div
      let myChart = echarts.init(document.getElementById("eschar2"));
      //为这个echarts的图添加属性
      this.option.series[0].data = [];
      this.option.yAxis[0].data = [];
      this.datanum = 0;
            const result = await sale.post({ todayfrom: this.fromtime, todayto: this.totime});
      result.data = JSON.parse(result.data);
          this.ds_order = result.data;
          console.log(result.data);
          this.sale.pn = [];
          this.sale.num = [];
          this.num.num1 = 0;
          this.num.num2 = 0;
          // result.data.forEach(ele => {
          //   if (ele.memo == "复销") {
          //     this.num.num1+=1
          //   }
          //   if(ele.memo=="特卖"){
          //     this.num.num2+=1
          //   }
          // });
          //this.option.series[0].data=[this.num.num1,this.num.num2];
          // this.option.xAxis.data = ["复消","特卖"];
          result.data.forEach((ele, key) => {
            result.data.forEach((ele_l, key_l) => {
              if (ele_l.pc == ele.pc && key != key_l) {
                ele.num = ele.num + ele_l.num;
                result.data.splice(key_l, 1);
              }
            });
            this.option.series[0].data.push({
              value: ele.num,
              name: ele.pn 
            });
            this.datanum += ele.num;
          });
          this.option.series[0].data.sort((a, b) => b.value - a.value);
          this.option.series[0].data.forEach(ele_s => {
            this.option.xAxis[0].data.push(ele_s.name);
          });
          //this.option.yAxis.data = this.sale.num;
          //console.log(this.option.xAxis.data);
          
          myChart.setOption(this.option, true);
          window.onresize = function(){ myChart.resize() };
    
    },
    onChange(date) {
      if (this.seltime) {
        this.fromtime = date.format("YYYYMMDD");
      } else {
        this.totime = date.format("YYYYMMDD");
      }
      return true;
    }
  },
  watch: {
    //数据变化时自动重画，在控制台修改message,会自动重画
    fromtime: function() {
      this.draw();
    },
    totime: function() {
      this.draw();
    }
  },
  mounted() {
    //页面加载的时候，调用画图方法，画图
    this.draw();
  }
};
</script>
<style scoped>
.char1 {
  text-align: center;
}
.top {
  margin: 20px;
}
.el-button {
  margin-top: 20px;
}
.top .el-input {
  max-width: 200px;
  width: 40%;
  margin-right: 10px;
}
</style>